<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>vue组件与路由 | 逸辰</title>
  <meta name="description" content="es6的新特性1、变量声明  var 、let 、 const  var 作用: 使用这个关键字声明变量是全局变量，容易出现变量混淆。 let 作用:  用来声明一个局部变量 。作用范围：从定义开始，到新定义的代码块结束 。 [推荐使用] const 作用：用来定义一个常量 。作用：变量一旦被定义不能被修改 。特殊说明：修饰number、字符串时变量的值不能修改， 修饰对象的时候对象的地址不能修改">
<meta property="og:type" content="article">
<meta property="og:title" content="vue组件与路由">
<meta property="og:url" content="https://yichenfirst.github.io/2021/09/11/%E5%89%8D%E7%AB%AF/vue%E7%BB%84%E4%BB%B6%E4%B8%8E%E8%B7%AF%E7%94%B1/index.html">
<meta property="og:site_name" content="逸辰">
<meta property="og:description" content="es6的新特性1、变量声明  var 、let 、 const  var 作用: 使用这个关键字声明变量是全局变量，容易出现变量混淆。 let 作用:  用来声明一个局部变量 。作用范围：从定义开始，到新定义的代码块结束 。 [推荐使用] const 作用：用来定义一个常量 。作用：变量一旦被定义不能被修改 。特殊说明：修饰number、字符串时变量的值不能修改， 修饰对象的时候对象的地址不能修改">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-140240.png">
<meta property="article:published_time" content="2021-09-10T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-17T13:41:27.784Z">
<meta property="article:author" content="逸辰">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-140240.png">
  <!-- Canonical links -->
  <link rel="canonical" href="https://yichenfirst.github.io/2021/09/11/%E5%89%8D%E7%AB%AF/vue%E7%BB%84%E4%BB%B6%E4%B8%8E%E8%B7%AF%E7%94%B1/index.html">
  
    <link rel="alternate" href="/atom.xml" title="逸辰" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 6.3.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">逸辰</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">后端开发</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 长春，中国</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ElasticSearch/">ElasticSearch</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/docker/">docker</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/go/">go</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/java/">java</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mybatis/">mybatis</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mysql/">mysql</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/redis/">redis</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/spring/">spring</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a><span class="category-list-count">3</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ElasticSearch/" rel="tag">ElasticSearch</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/aop/" rel="tag">aop</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/" rel="tag">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/go/" rel="tag">go</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/" rel="tag">java</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/" rel="tag">mybatis</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/" rel="tag">mysql</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/redis/" rel="tag">redis</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring/" rel="tag">spring</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springcloud/" rel="tag">springcloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springsecurity/" rel="tag">springsecurity</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/tcp/" rel="tag">tcp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/" rel="tag">token</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%80%BB%E7%BB%93/" rel="tag">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" rel="tag">操作系统</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/ElasticSearch/" style="font-size: 13px;">ElasticSearch</a> <a href="/tags/aop/" style="font-size: 13px;">aop</a> <a href="/tags/docker/" style="font-size: 13px;">docker</a> <a href="/tags/go/" style="font-size: 13px;">go</a> <a href="/tags/java/" style="font-size: 13.86px;">java</a> <a href="/tags/javascript/" style="font-size: 13px;">javascript</a> <a href="/tags/mybatis/" style="font-size: 13px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 13.57px;">mysql</a> <a href="/tags/redis/" style="font-size: 13.71px;">redis</a> <a href="/tags/spring/" style="font-size: 14px;">spring</a> <a href="/tags/springcloud/" style="font-size: 13px;">springcloud</a> <a href="/tags/springsecurity/" style="font-size: 13px;">springsecurity</a> <a href="/tags/tcp/" style="font-size: 13px;">tcp</a> <a href="/tags/token/" style="font-size: 13px;">token</a> <a href="/tags/vue/" style="font-size: 13.43px;">vue</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.14px;">总结</a> <a href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" style="font-size: 13.29px;">操作系统</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 13px;">面试</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/09/">九月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/07/">七月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/05/">五月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/04/">四月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/">三月 2023</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/02/">二月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/01/">一月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/12/">十二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/11/">十一月 2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/10/">十月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/09/">九月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/08/">八月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/06/">六月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/04/">四月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/02/">二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">一月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/09/">九月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/08/">八月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a><span class="archive-list-count">2</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a>
              </p>
              <p class="item-title">
                <a href="/2023/09/01/%E5%88%86%E5%B8%83%E5%BC%8F/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/" class="title">分布式事务</a>
              </p>
              <p class="item-date">
                <time datetime="2023-09-01T08:53:49.259Z" itemprop="datePublished">2023-09-01</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/07/28/java/Java%E7%BA%BF%E7%A8%8B%E6%A8%A1%E5%9E%8B/" class="title">Java线程模型</a>
              </p>
              <p class="item-date">
                <time datetime="2023-07-28T13:59:18.661Z" itemprop="datePublished">2023-07-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/19/java/AQS/" class="title">AQS详解</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-18T16:00:00.000Z" itemprop="datePublished">2023-05-19</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/go/">go</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/03/go/new%E4%B8%8Emake%E5%85%B3%E9%94%AE%E5%AD%97%E7%9A%84%E5%8C%BA%E5%88%AB/" class="title">new与make关键字的区别</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-02T16:00:00.000Z" itemprop="datePublished">2023-05-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/04/15/java/CAS/" class="title">CAS</a>
              </p>
              <p class="item-date">
                <time datetime="2023-04-14T16:00:00.000Z" itemprop="datePublished">2023-04-15</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-前端/vue组件与路由" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      vue组件与路由
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2021/09/11/%E5%89%8D%E7%AB%AF/vue%E7%BB%84%E4%BB%B6%E4%B8%8E%E8%B7%AF%E7%94%B1/" class="article-date">
	  <time datetime="2021-09-10T16:00:00.000Z" itemprop="datePublished">2021-09-11</time>
	</a>
</span>
        
        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/vue/" rel="tag">vue</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2021/09/11/%E5%89%8D%E7%AB%AF/vue%E7%BB%84%E4%BB%B6%E4%B8%8E%E8%B7%AF%E7%94%B1/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 6.2k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 27(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h2 id="es6的新特性"><a href="#es6的新特性" class="headerlink" title="es6的新特性"></a>es6的新特性</h2><p><strong>1、变量声明  var 、let 、 const</strong></p>
<ul>
<li>var 作用: 使用这个关键字声明变量是全局变量，容易出现变量混淆。</li>
<li>let 作用:  用来声明一个局部变量 。作用范围：从定义开始，到新定义的代码块结束 。 [推荐使用]</li>
<li>const 作用：用来定义一个常量 。作用：变量一旦被定义不能被修改 。特殊说明：修饰number、字符串时变量的值不能修改， 修饰对象的时候对象的地址不能修改。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script &gt;</span><br><span class="line">     <span class="keyword">function</span> <span class="title function_">test</span>(<span class="params"></span>){</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++){</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"function inner:"</span>,i);</span><br><span class="line">        }</span><br><span class="line">        <span class="comment">//console.log("function out:",i);</span></span><br><span class="line">        <span class="keyword">const</span> name = <span class="string">"xiaochen"</span>; <span class="comment">//常量</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">const</span> user = {<span class="attr">name</span>:<span class="string">"小三"</span>}; <span class="comment">//const 修饰对象，对象地址不能改变 对象中的属性可以随意修改</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(user.<span class="property">name</span>);</span><br><span class="line">        user.<span class="property">name</span> = <span class="string">"小明"</span>;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(user.<span class="property">name</span>);</span><br><span class="line">    }</span><br><span class="line">    <span class="title function_">test</span>(); <span class="comment">//调用函数</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>2、字符串模板  通过反引号使用字符串模板</strong></p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> html = <span class="string">"&lt;div&gt;\n"</span>+</span><br><span class="line">                <span class="string">"&lt;h1&gt;我是标签&lt;/h1&gt;\n"</span>+</span><br><span class="line">                <span class="string">"&lt;input type=\"text\" name=\"name\"&gt;\n"</span>+</span><br><span class="line">                <span class="string">" &lt;button&gt;我是按钮&lt;/button&gt;\n"</span>+</span><br><span class="line">            <span class="string">"&lt;/div&gt;\n"</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> html1 = <span class="string">`&lt;div&gt;</span></span><br><span class="line"><span class="string">                &lt;h1&gt;我是标签&lt;/h1&gt;</span></span><br><span class="line"><span class="string">                &lt;input type="text" name="name"&gt;</span></span><br><span class="line"><span class="string">                &lt;button&gt;我是按钮&lt;/button&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;`</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(html);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(html1);</span><br></pre></td></tr></tbody></table></figure>

<p><strong>3、es6 function(){}</strong></p>
<p>匿名函数自己存在自己<code>this</code>，简化写法为<code>()=&gt;</code>(箭头函数) ,  箭头函数没有自己<code>this</code>。 </p>
<p><strong>4、对象定义方式</strong></p>
<p><code>es5</code>对象定义方式: </p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">"小陈"</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">23</span>;</span><br><span class="line"><span class="keyword">let</span> bir = <span class="string">"2012-12-12"</span>;</span><br><span class="line"><span class="keyword">const</span> user = {<span class="attr">name</span>:name,<span class="attr">age</span>:age,<span class="attr">bir</span>:bir} ; <span class="comment">//es5</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(user);</span><br></pre></td></tr></tbody></table></figure>

<p><code>es6</code>中对象的扩展：当对象属性名和属性赋值名一致时，可以省略变量名不写。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">"小陈"</span>;</span><br><span class="line"><span class="keyword">let</span> age = <span class="number">23</span>;</span><br><span class="line"><span class="keyword">let</span> bir = <span class="string">"2012-12-12"</span>;</span><br><span class="line"><span class="keyword">const</span> stu = {name,age,bir} ; <span class="comment">//es6</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(stu);</span><br></pre></td></tr></tbody></table></figure>



<h2 id="Vue中组件-component"><a href="#Vue中组件-component" class="headerlink" title="Vue中组件(component)"></a>Vue中组件(component)</h2><h3 id="1、Vue标准开发模式"><a href="#1、Vue标准开发模式" class="headerlink" title="1、Vue标准开发模式"></a>1、Vue标准开发模式</h3><p><strong>1.1、vue推荐开发方式是sPA : Single Page (Web)Application  （单页面应用）</strong></p>
<ul>
<li>vue推荐开发方式是基于单页面应用单页面web应用</li>
</ul>
<p><strong>1.2、什么是sPA单页面应用</strong></p>
<ul>
<li>单页面应用:就是日后项目中只有一张页面</li>
</ul>
<p><strong>1.3、为什么vue推荐开发方式sPA的开发方式?</strong></p>
<ul>
<li><p>引入vue js文件</p>
</li>
<li><p>在现有页面中创建vue实例对象一个页面中只能存在一个vue实例一个。</p>
</li>
</ul>
<p>==vue推荐开发方式要求:一个应用中只能存在一个vue实例== </p>
<p><strong>1.4、使用现有手段严格遵循sPA存在问题?</strong></p>
<ul>
<li><p>现有开发方式导致项目中唯一一个页面中代码越来越多不利后续维护</p>
</li>
<li><p>现有开发方式导致项目中唯一一个页面中完成全部业务功能,导致当前页面每次加载速度非常慢</p>
</li>
</ul>
<p><strong>1.5、为了严格遵循sPa开发方式在vue中提供了vue组件component</strong> </p>
<p><strong>组件:</strong></p>
<ul>
<li><p>组件减少vue根实例代码量</p>
</li>
<li><p>一个组负贲完成项目中一个功能或者一组功实现业务功能隔离</p>
</li>
<li><p>组件还可以在vue实现复用</p>
</li>
</ul>
<h3 id="2、-组件作用"><a href="#2、-组件作用" class="headerlink" title="2、 组件作用"></a>2、 组件作用</h3><p>组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。组件还可以实现共享和复用。</p>
<h3 id="3-、组件使用"><a href="#3-、组件使用" class="headerlink" title="3 、组件使用"></a>3 、组件使用</h3><h4 id="3-1-、全局组件注册"><a href="#3-1-、全局组件注册" class="headerlink" title="3.1 、全局组件注册"></a>3.1 、全局组件注册</h4><blockquote>
<p>说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.开发全局组件</span></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//开发全局组件</span></span><br><span class="line">    <span class="comment">//参数1. 组件名称     参数2：指定组件内容的配置对象</span></span><br><span class="line">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'login'</span>,{</span><br><span class="line">       <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户登录组件&lt;/h3&gt;&lt;/div&gt;"</span>, <span class="comment">//template:模板 用来书写组件中html代码 注意：template属性必须存在一个根容器，有且只有一个根容器</span></span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line">    <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">'register'</span>,{</span><br><span class="line">        <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h3&gt;用户注册组件&lt;/h3&gt;&lt;/div&gt;"</span></span><br><span class="line">    });</span><br><span class="line">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">        <span class="attr">el</span>: <span class="string">"#app"</span>,</span><br><span class="line">        <span class="attr">data</span>:{</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">methods</span>:{</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">computed</span>:{</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="comment">//2.使用全局组件  在Vue实例范围内</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!--使用全局组件：根据组件名称使用全局组件--&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">	<span class="tag">&lt;<span class="name">register</span>&gt;</span><span class="tag">&lt;/<span class="name">register</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 注意:</span></span><br><span class="line"><span class="bullet"> -</span> 1.Vue.component用来开发全局组件 参数1: 组件的名称  参数2: 组件配置{}  template:''用来书写组件的html代码  template中必须有且只有一个root元素</span><br><span class="line"><span class="bullet"> -</span> 2.使用时需要在Vue的作用范围内根据组件名使用全局组件</span><br><span class="line"><span class="bullet"> -</span> 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用</span><br></pre></td></tr></tbody></table></figure>

<h4 id="3-2-、局部组件注册"><a href="#3-2-、局部组件注册" class="headerlink" title="3.2 、局部组件注册"></a>3.2 、局部组件注册</h4><blockquote>
<p>说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加</p>
</blockquote>
<ul>
<li>第一种开发方式</li>
</ul>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//局部组件登录模板声明</span></span><br><span class="line"><span class="comment">//定义登录组件配置对象</span></span><br><span class="line"><span class="keyword">const</span> login = {  <span class="comment">//定义一个登录组件</span></span><br><span class="line">    <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户登录局部组件&lt;/h3&gt;&lt;/div&gt;"</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">el</span>: <span class="string">"#app"</span>,</span><br><span class="line">    <span class="attr">data</span>:{</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>:{</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">computed</span>:{</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">components</span>:{ <span class="comment">//在这里注册组件都为局部组件</span></span><br><span class="line">        login,   <span class="comment">//es5 login:login  es6 login,</span></span><br><span class="line">        <span class="attr">register</span>:{</span><br><span class="line">            <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户注册局部组件&lt;/h3&gt;&lt;/div&gt;"</span></span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">});</span><br><span class="line"><span class="comment">//局部组件使用 在Vue实例范围内</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">register</span>&gt;</span><span class="tag">&lt;/<span class="name">register</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<ul>
<li>第二种开发方式</li>
</ul>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.声明局部组件模板  template 标签 注意:在Vue实例作用范围外声明</span></span><br><span class="line">    &lt;template id=<span class="string">"loginTemplate"</span>&gt;</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>用户登录局部组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">//2.定义变量用来保存模板配置对象</span></span><br><span class="line">    <span class="comment">//定义登录组件配置对象</span></span><br><span class="line">    <span class="keyword">const</span> login = {  <span class="comment">//定义一个登录组件</span></span><br><span class="line">        <span class="attr">template</span>:<span class="string">"#loginTemplate"</span></span><br><span class="line">    };</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.注册组件	</span></span><br><span class="line">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">        <span class="attr">el</span>: <span class="string">"#app"</span>,</span><br><span class="line">        <span class="attr">data</span>:{</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">methods</span>:{</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">computed</span>:{</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">components</span>:{ <span class="comment">//在这里注册组件都为局部组件</span></span><br><span class="line">            login,   <span class="comment">//注册登录组件</span></span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line"> <span class="comment">//4.局部组件使用 在Vue实例范围内</span></span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="4、Prop的使用"><a href="#4、Prop的使用" class="headerlink" title="4、Prop的使用"></a>4、Prop的使用</h3><p><strong>作用:props用来给组件传递相应静态数据或者是动态数据的</strong> </p>
<h4 id="4-1、-通过在组件上声明静态数据传递给组件内部"><a href="#4-1、-通过在组件上声明静态数据传递给组件内部" class="headerlink" title="4.1、 通过在组件上声明静态数据传递给组件内部"></a>4.1、 通过在组件上声明静态数据传递给组件内部</h4><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.声明组件模板配置对象</span></span><br><span class="line">      <span class="keyword">const</span> login = {</span><br><span class="line">        <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h3&gt;登录界面-{{title}}-{{count}}-{{age}}&lt;/h3&gt;&lt;/div&gt;"</span>,</span><br><span class="line">        <span class="title function_">data</span>(<span class="params"></span>){ <span class="comment">//注意：在props中定义数据，不能在data中重复定义，如果重复定义，优先使用					props中数据为主</span></span><br><span class="line">            <span class="keyword">return</span> {</span><br><span class="line">                loginTitle : <span class="variable language_">this</span>.<span class="property">title</span>,</span><br><span class="line">            };</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">props</span>:[<span class="string">'title'</span>,<span class="string">'count'</span>,<span class="string">'age'</span>],  <span class="comment">//props作用 用来接收使用组件时通过组件标签传递的数据</span></span><br><span class="line">    };</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.注册组件</span></span><br><span class="line"><span class="comment">// 如何实现父组件向子组件内部传递数据，并将数据在子组件中进行展示?注意：在vue中父组件向子组件传递数据可以使用 prop 属性完成数据传递</span></span><br><span class="line">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">       <span class="attr">el</span>:<span class="string">"#app"</span>,</span><br><span class="line">       <span class="attr">data</span>:{</span><br><span class="line">           <span class="attr">msg</span>: <span class="string">"Vue 中组件开发"</span>,</span><br><span class="line"></span><br><span class="line">       },</span><br><span class="line">       <span class="attr">methods</span>:{},</span><br><span class="line">       <span class="attr">computed</span>:{},</span><br><span class="line">       <span class="attr">components</span>:{</span><br><span class="line">            login, <span class="comment">//注册组价</span></span><br><span class="line">       }</span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.通过组件完成数据传递</span></span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">login</span> <span class="attr">title</span>=<span class="string">"欢迎访问我们的系统!!!"</span> <span class="attr">count</span>=<span class="string">"11"</span> <span class="attr">age</span>=<span class="string">"23"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">			1.使用组件时可以在组件上定义多个属性以及对应数据</span></span><br><span class="line"><span class="code">			2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值</span></span><br><span class="line"><span class="code">			3.在props中定义数据，不能在data中重复定义，如果重复定义，优先使用props中数据为主</span></span><br></pre></td></tr></tbody></table></figure>

<h4 id="4-2、通过在组件上声明动态数据传递给组件内部"><a href="#4-2、通过在组件上声明动态数据传递给组件内部" class="headerlink" title="4.2、通过在组件上声明动态数据传递给组件内部"></a>4.2、通过在组件上声明动态数据传递给组件内部</h4><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.声明组件模板对象</span></span><br><span class="line">    <span class="keyword">const</span> login = {</span><br><span class="line">        <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h3&gt;登录界面-{{title}}&lt;/h3&gt;&lt;/div&gt;"</span>,</span><br><span class="line">        <span class="title function_">data</span>(<span class="params"></span>){</span><br><span class="line">            <span class="keyword">return</span> {</span><br><span class="line">            };</span><br><span class="line">        },</span><br><span class="line">        <span class="attr">props</span>:[<span class="string">'title'</span>],  <span class="comment">//props作用 用来接收使用组件时通过组件标签传递的数据</span></span><br><span class="line">  	};</span><br><span class="line"><span class="comment">//2.注册局部组件</span></span><br><span class="line">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">           <span class="attr">el</span>:<span class="string">"#app"</span>,</span><br><span class="line">           <span class="attr">data</span>:{</span><br><span class="line">               <span class="attr">msg</span>: <span class="string">"Vue 中组件开发"</span>,</span><br><span class="line">               <span class="attr">name</span>:<span class="string">"小李"</span>,</span><br><span class="line">           },</span><br><span class="line">           <span class="attr">methods</span>:{},</span><br><span class="line">           <span class="attr">computed</span>:{},</span><br><span class="line">           <span class="attr">components</span>:{</span><br><span class="line">                login, <span class="comment">//注册组价</span></span><br><span class="line">           }</span><br><span class="line">        });</span><br><span class="line"></span><br><span class="line"><span class="comment">//3.使用组件</span></span><br><span class="line">	  <span class="language-xml"><span class="tag">&lt;<span class="name">login</span> <span class="attr">:title</span>=<span class="string">"name"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span>  <span class="comment">//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化</span></span><br></pre></td></tr></tbody></table></figure>

<h4 id="4-3、prop的单向数据流"><a href="#4-3、prop的单向数据流" class="headerlink" title="4.3、prop的单向数据流"></a>4.3、prop的单向数据流</h4><blockquote>
<p>单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个<strong>单向下行绑定</strong>：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。</p>
</blockquote>
<ul>
<li><p>所有的 prop 都使得其父子 prop 之间形成了一个<strong>单向下行绑定</strong>：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。</p>
</li>
<li><p>额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你<strong>不</strong>应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网</p>
</li>
</ul>
<h3 id="5、组件中定义数据和事件使用"><a href="#5、组件中定义数据和事件使用" class="headerlink" title="5、组件中定义数据和事件使用"></a>5、组件中定义数据和事件使用</h3><h5 id="1-组件中定义属于组件的数据"><a href="#1-组件中定义属于组件的数据" class="headerlink" title="1. 组件中定义属于组件的数据"></a>1. 组件中定义属于组件的数据</h5><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义局部用户列表组件配置对象</span></span><br><span class="line"><span class="keyword">const</span> users = {</span><br><span class="line">    <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户列表-{{count}}-{{name}}&lt;/h3&gt;&lt;/div&gt;"</span>, <span class="comment">//用来定义组件html内容</span></span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>){     <span class="comment">//用来给当前组件定义一系列数据 注意：在组件中定义的数据只能在当前组件中可用</span></span><br><span class="line">        <span class="keyword">return</span> {</span><br><span class="line">            <span class="attr">count</span>:<span class="number">0</span>,</span><br><span class="line">            <span class="attr">name</span>:<span class="string">"小李"</span>,</span><br><span class="line">        };</span><br><span class="line">    }</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>

<h5 id="2-组件中事件定义"><a href="#2-组件中事件定义" class="headerlink" title="2.组件中事件定义"></a>2.组件中事件定义</h5><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义局部用户列表组件配置对象</span></span><br><span class="line"><span class="keyword">const</span> users = {</span><br><span class="line">    <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户列表-{{count}}-{{name}}-{{countSqrt}}&lt;/h3&gt;&lt;button @click='changeCount'&gt;+&lt;/button&gt;&lt;ul&gt;&lt;li v-for='item in items'&gt;{{item}}&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;"</span>, <span class="comment">//用来定义组件html内容</span></span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>){     <span class="comment">//用来给当前组件定义一系列数据 注意：在组件中定义的数据只能在当前组件中可用</span></span><br><span class="line">        <span class="keyword">return</span> {</span><br><span class="line">            <span class="attr">count</span>:<span class="number">0</span>,</span><br><span class="line">            <span class="attr">name</span>:<span class="string">"小李"</span>,</span><br><span class="line">            <span class="comment">//items:["山西","北京","天津"],</span></span><br><span class="line">            <span class="attr">items</span>:[],</span><br><span class="line">        };</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>:{   <span class="comment">//用来给当前组件定义一系列事件</span></span><br><span class="line">        <span class="title function_">changeCount</span>(<span class="params"></span>){</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">count</span>++;</span><br><span class="line">        }</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">computed</span>:{  <span class="comment">//用来给当前组件定义一系列计算属性，用来对页面中结果进行二次计算处理时候</span></span><br><span class="line">        <span class="title function_">countSqrt</span>(<span class="params"></span>){</span><br><span class="line">            <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">count</span>*<span class="variable language_">this</span>.<span class="property">count</span>;</span><br><span class="line">        }</span><br><span class="line">    },</span><br><span class="line">    <span class="title function_">created</span>(<span class="params"></span>){ <span class="comment">//组件已经注入了data、methods、computed 相关数据方法</span></span><br><span class="line">        <span class="comment">//发送请求</span></span><br><span class="line">        <span class="comment">/*axios.get("/xxx").then(res=&gt;{</span></span><br><span class="line"><span class="comment">                this.items = res.data;</span></span><br><span class="line"><span class="comment">            });*/</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">items</span>=[<span class="string">"山西"</span>,<span class="string">"北京"</span>,<span class="string">"天津"</span>];</span><br><span class="line">    },</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结	</span></span><br><span class="line"><span class="code">		1.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可</span></span><br><span class="line"><span class="code">		2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="6、向子组件中传递事件并在子组件中调用该事件"><a href="#6、向子组件中传递事件并在子组件中调用该事件" class="headerlink" title="6、向子组件中传递事件并在子组件中调用该事件"></a>6、向子组件中传递事件并在子组件中调用该事件</h3><p><strong>在子组件中调用传递过来的相关事件必须使用 this.$emit(‘函数名’) 方式调用</strong> </p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">       <span class="tag">&lt;<span class="name">h1</span>&gt;</span>信息：{{msg}} 年龄：{{age}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">       <span class="tag">&lt;<span class="name">login</span> @<span class="attr">aa</span>=<span class="string">"findAll"</span> @<span class="attr">test</span>=<span class="string">"test"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//如何将父组件中事件传递给子组件中 1.在使用事件时使用@别名=“传递事件名”  2.在组件中调用传递的事件时 this.$emit('别名')</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//定义一个登录组件配置对象</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> login = {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h3&gt;用户登录-{{msg}}&lt;/h3&gt;&lt;button @click='test'&gt;点我触发事件&lt;/button&gt;&lt;/div&gt;"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">data</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">return</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">msg</span>:<span class="string">"我是子组件的信息"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">age</span>:<span class="number">23</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">user</span>:{<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">name</span>:<span class="string">"小陈"</span>,<span class="attr">age</span>:<span class="number">23</span>,<span class="attr">bir</span>:<span class="string">"2012-02-09"</span>},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">methods</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="title function_">test</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="title function_">alert</span>(<span class="string">'子组件中定义的事件...'</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="comment">//调用父组件中findAll事件 aa 事件名：</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="comment">// this.$emit('aa');   //$emit用来调用父组件中相关事件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="variable language_">this</span>.$emit(<span class="string">'test'</span>,<span class="variable language_">this</span>.<span class="property">msg</span>,<span class="variable language_">this</span>.<span class="property">age</span>,<span class="variable language_">this</span>.<span class="property">user</span>);   <span class="comment">//$emit用来调用父组件中相关事件,并传递参数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">data</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">msg</span>: <span class="string">"Vue 中组件开发"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">age</span>:<span class="number">23</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">user</span>:{<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>:<span class="string">"小吴"</span>,<span class="attr">age</span>:<span class="number">12</span>},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">methods</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="title function_">findAll</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="title function_">alert</span>(<span class="string">'父组件中定义的事件...'</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="title function_">test</span>(<span class="params">msg,age,user</span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="title function_">alert</span>(<span class="string">'父组件中定义test的事件....'</span>+msg);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"msg:"</span>,msg);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"age"</span>,age);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"user"</span>,user);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="variable language_">this</span>.<span class="property">msg</span> = msg;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="variable language_">this</span>.<span class="property">age</span> = age;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">computed</span>:{},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">components</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            login, <span class="comment">//注册组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<h3 id="7、插槽的使用"><a href="#7、插槽的使用" class="headerlink" title="7、插槽的使用"></a>7、插槽的使用</h3><p><strong>怎么理解插槽？</strong></p>
<ul>
<li><p>slot相当于一个空标签，通过vue可以实现动态改变值和样式，把一块区域内容抽了出来可以实现复用，就和Java里封装的工具类一样。</p>
</li>
<li><p>插槽就是子组件中的提供给父组件使用的一个占位符。</p>
</li>
<li><p>我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。</p>
</li>
<li><p>通俗易懂的讲，slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面</p>
</li>
</ul>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id="app"&gt;</span><br><span class="line">       &lt;h1&gt;{{msg}}&lt;/h1&gt;</span><br><span class="line">        &lt;!--vue使用组件--&gt;</span><br><span class="line">       &lt;login&gt;&lt;h5 slot="aa"&gt;我是用户自定义aa内容&lt;/h5&gt;&lt;h5 slot="bb"&gt;我是用户自定义bb内容&lt;/h5&gt;&lt;/login&gt;</span><br><span class="line">        &lt;hr&gt;</span><br><span class="line">        &lt;login&gt;&lt;button&gt;+++&lt;/button&gt;&lt;/login&gt;</span><br><span class="line">        &lt;hr&gt;</span><br><span class="line">        &lt;login&gt;&lt;/login&gt;</span><br><span class="line">        &lt;hr&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src="js/axios.min.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">    //slot：插槽   作用：用来扩展自定义组件让组件变得更加灵活，用来个性化定制自己的组件  注意：插槽必须配合组件才能使用</span><br><span class="line">    const login = {</span><br><span class="line">        template: "&lt;div&gt;&lt;slot name='aa'&gt;&lt;span&gt;默认扩展&lt;/span&gt;&lt;/slot&gt;&lt;h3&gt;用户登录界面&lt;/h3&gt;&lt;slot name='bb'&gt;&lt;span&gt;默认扩展&lt;/span&gt;&lt;/slot&gt;&lt;/div&gt;",</span><br><span class="line">    };</span><br><span class="line">    const app = new Vue({</span><br><span class="line">       el:"#app",</span><br><span class="line">       data:{</span><br><span class="line">           msg:"slot 插槽的使用"</span><br><span class="line">       },</span><br><span class="line">       methods:{</span><br><span class="line">       },</span><br><span class="line">       computed:{},</span><br><span class="line">       components: {</span><br><span class="line">           login,</span><br><span class="line">       },</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h2 id="Vue中路由-Vue-Router"><a href="#Vue中路由-Vue-Router" class="headerlink" title="Vue中路由 (Vue Router)"></a>Vue中路由 (Vue Router)</h2><h3 id="1、路由"><a href="#1、路由" class="headerlink" title="1、路由"></a>1、路由</h3><p><strong>路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理</strong> </p>
<h3 id="2、作用"><a href="#2、作用" class="headerlink" title="2、作用"></a>2、作用</h3><blockquote>
<p> 用来在vue中实现组件之间的动态切换</p>
</blockquote>
<h3 id="3、使用路由"><a href="#3、使用路由" class="headerlink" title="3、使用路由"></a>3、使用路由</h3><p><strong>3.1、引入路由</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--cdn方式--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/vue-router/dist/vue-router.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span>  <span class="comment">//vue 路由js</span></span><br><span class="line">&lt;!--本地引入--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue-router.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>3.2、创建组件对象</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建组件配置对象</span></span><br><span class="line"><span class="keyword">const</span> users = {</span><br><span class="line">    <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h3&gt;用户管理&lt;/h3&gt;&lt;/div&gt;"</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> emps = {</span><br><span class="line">    <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h3&gt;员工管理&lt;/h3&gt;&lt;/div&gt;"</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p><strong>3.3、定义路由对象的规则</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>:[</span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/users'</span>,<span class="attr">component</span>:users}, <span class="comment">//用来定义具体得的某个组件路由规则 path:用来指定对应请求路径 component:指定路径对应的组件</span></span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/emps'</span>, <span class="attr">component</span>:emps }  <span class="comment">//用来定义一些规则</span></span><br><span class="line">    ]</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<p><strong>3.4、将路由对象注册到vue实例</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">el</span>:<span class="string">"#app"</span>,</span><br><span class="line">    <span class="attr">data</span>:{</span><br><span class="line">        <span class="attr">msg</span>:<span class="string">"vue 中router(路由)的使用"</span>,</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>:{},</span><br><span class="line">    <span class="attr">computed</span>:{},</span><br><span class="line">    <span class="attr">components</span>:{},  <span class="comment">//注册局部组件</span></span><br><span class="line">    <span class="attr">router</span>:router,  <span class="comment">//用来注册路由配置</span></span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<p><strong>3.5、在页面中显示路由的组件</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--指定路由组件在哪里展示 router-view 标签：作用：用来展示路由对应组件显示的位置--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>3.6、根据链接切换路由</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/users"</span>&gt;</span>用户管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/emps"</span>&gt;</span>员工管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="4、router-link使用"><a href="#4、router-link使用" class="headerlink" title="4、router-link使用"></a>4、router-link使用</h3><p>**作用:**用来替换我们在切换路由时使用a标签切换路由</p>
<p>**好处:**就是可以自动给路由路径加入#不需要手动加入 </p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--router-link 标签： 作用：用来替换a标签 好处：书写路径时不需要显示加入# to: 用来指定路由路径 tag：默认为a标签 用来指定router-link底层渲染标签--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/users"</span> <span class="attr">tag</span>=<span class="string">"a"</span>&gt;</span>用户管理(link)<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/emps"</span>  <span class="attr">tag</span>=<span class="string">"a"</span>&gt;</span>员工管理(link)<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># 总结:</span></span><br><span class="line"><span class="code">	1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径</span></span><br><span class="line"><span class="code">	2.router-link to属性用来书写路由路径   tag属性:用来将router-link渲染成指定的标签</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="5、默认路由"><a href="#5、默认路由" class="headerlink" title="5、默认路由"></a>5、默认路由</h3><p>**作用:**用来在第一次进入界面是显示一个默认的组件 </p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>:[</span><br><span class="line">        <span class="comment">//{ path:'/',component:login},</span></span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">redirect</span>:<span class="string">'users'</span> },     <span class="comment">//默认路由规则 redirect:(路由路径重定向)</span></span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/users'</span>,<span class="attr">component</span>:users},  <span class="comment">//用户组件路由规则</span></span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/emps'</span>, <span class="attr">component</span>:emps }   <span class="comment">//员工组件路由规则</span></span><br><span class="line">    ]</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<h3 id="6、路由动态切换两种方式"><a href="#6、路由动态切换两种方式" class="headerlink" title="6、路由动态切换两种方式"></a>6、路由动态切换两种方式</h3><p><strong>方式一：通过使用标签方式直接进行路由切换</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--<span class="number">1.</span>通过使用标签方式直接进行路由切换--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/users"</span>&gt;</span>用户管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/emps"</span>&gt;</span>员工管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/users"</span> <span class="attr">tag</span>=<span class="string">"a"</span>&gt;</span>用户管理(link)<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/emps"</span>  <span class="attr">tag</span>=<span class="string">"a"</span>&gt;</span>员工管理(link)<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<p><strong>方式二：通过js代码的方式进行动态切换路由</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--<span class="number">2.</span>通过js代码的方式进行动态切换路由 <span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">push</span>(<span class="string">"切换的路由路径"</span>)--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"test"</span>&gt;</span>测试动态路由<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">el</span>:<span class="string">"#app"</span>,</span><br><span class="line">    <span class="attr">data</span>:{</span><br><span class="line">        <span class="attr">msg</span>:<span class="string">"vue 中router(路由)的使用 route-link标签的使用"</span>,</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>:{</span><br><span class="line">        <span class="title function_">test</span>(<span class="params"></span>){</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"test"</span>);</span><br><span class="line">            <span class="comment">//this.$router.push("/emps"); //代表切换路由路径</span></span><br><span class="line">            <span class="comment">//this.$router.push({path:'/emps'}); //切换路由</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({<span class="attr">name</span>:<span class="string">"emps"</span>}); <span class="comment">//名称方式切换路由        [推荐]</span></span><br><span class="line">        },</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">computed</span>:{},</span><br><span class="line">    <span class="attr">components</span>:{},  <span class="comment">//注册局部组件</span></span><br><span class="line">    router,     <span class="comment">//注册路由</span></span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<h3 id="7、路由中参数传递"><a href="#7、路由中参数传递" class="headerlink" title="7、路由中参数传递"></a>7、路由中参数传递</h3><p><strong>第一种方式传递参数 传统方式</strong></p>
<p>1、通过?号形式拼接参数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--<span class="number">1.</span>获取？后传递参数 <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">query</span>.<span class="property">key</span>.?后面参数key--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/users?deptid=21name=李四"</span>&gt;</span>用户管理<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<p>2、组件中获取参数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> users = {</span><br><span class="line">    <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h1&gt;用户管理&lt;/h1&gt;&lt;/div&gt;"</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>){</span><br><span class="line">        <span class="keyword">return</span> {};</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>: {},</span><br><span class="line">    <span class="title function_">created</span>(<span class="params"></span>){</span><br><span class="line">        <span class="comment">//获取路由路径中参数 1.获取queryString(deptid=21)中传递参数</span></span><br><span class="line">        <span class="comment">//this.$route 当前路由对象</span></span><br><span class="line">        <span class="comment">//this.$router 路由管理器对象</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"deptid:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">deptid</span>);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"name:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">name</span>);</span><br><span class="line">    }</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>

<p><strong>第二种方式传递参数 restful</strong></p>
<p>1、通过使用路径方式传递参数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--<span class="number">2.</span>获取路由路径中参数 rest 方式参数获取  <span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.路径中别名--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/emps/11/王五"</span>&gt;</span>员工管理<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>:[      </span><br><span class="line">        {<span class="attr">path</span>:<span class="string">'/emps/:id/:name'</span>, <span class="attr">name</span>:<span class="string">'emps'</span>,<span class="attr">component</span>:emps }   <span class="comment">//员工组件路由规则</span></span><br><span class="line">    ]</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<p>2、组件中获取参数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> emps = {</span><br><span class="line">    <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h1&gt;员工管理&lt;/h1&gt;&lt;/div&gt;"</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>){</span><br><span class="line">        <span class="keyword">return</span> {};</span><br><span class="line">    },</span><br><span class="line">    <span class="attr">methods</span>: {},</span><br><span class="line">    <span class="title function_">created</span>(<span class="params"></span>) {</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"id:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">id</span>); <span class="comment">//获取路径中的参数</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"name:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">name</span>); <span class="comment">//获取路径中的参数</span></span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p><strong>完整代码</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>vue系列课程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{msg}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!--切换路由--&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!--1.获取？后传递参数 this.route.query.key.?后面参数key--&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/users?deptid=21name=李四"</span>&gt;</span>用户管理<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!--2.获取路由路径中参数 rest 方式参数获取  this.$route.params.路径中别名--&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/emps/11/王五"</span>&gt;</span>员工管理<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!--router-view 显示路由组件--&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"js/vue-router.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//创建组件配置对象</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> users = {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">template</span>:<span class="string">"&lt;div&gt;&lt;h1&gt;用户管理&lt;/h1&gt;&lt;/div&gt;"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">data</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">return</span> {};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">methods</span>: {},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">created</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//获取路由路径中参数 1.获取queryString(deptid=21)中传递参数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//this.$route 当前路由对象</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">//this.$router 路由管理器对象</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"deptid:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">deptid</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"name:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">name</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> emps = {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">template</span>: <span class="string">"&lt;div&gt;&lt;h1&gt;员工管理&lt;/h1&gt;&lt;/div&gt;"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">data</span>(<span class="params"></span>){</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">return</span> {};</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">methods</span>: {},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">created</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"id:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">id</span>); <span class="comment">//获取路径中的参数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"name:"</span>,<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">name</span>); <span class="comment">//获取路径中的参数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//创建路由对象并定义路由规则</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">routes</span>:[</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            {<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">redirect</span>:<span class="string">'users'</span> },     <span class="comment">//默认路由规则 redirect:(路由路径重定向)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            {<span class="attr">path</span>:<span class="string">'/users'</span>,<span class="attr">name</span>:<span class="string">'users'</span>,<span class="attr">component</span>:users},  <span class="comment">//用户组件路由规则   name:路由名称 必须唯一</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            {<span class="attr">path</span>:<span class="string">'/emps/:id/:name'</span>, <span class="attr">name</span>:<span class="string">'emps'</span>,<span class="attr">component</span>:emps }   <span class="comment">//员工组件路由规则</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">el</span>:<span class="string">"#app"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">data</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">msg</span>:<span class="string">"vue 中router(路由)的使用 route-link标签的使用"</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">methods</span>:{</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       },</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">computed</span>:{},</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="attr">components</span>:{},  <span class="comment">//注册局部组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       router,     <span class="comment">//注册路由</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    });</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="8、嵌套路由"><a href="#8、嵌套路由" class="headerlink" title="8、嵌套路由"></a>8、嵌套路由</h3><p><strong>8.1、声明最外层和内层路由</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template id=<span class="string">"product"</span>&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>商品管理<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/product/add"</span>&gt;</span>商品添加<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/product/edit"</span>&gt;</span>商品编辑<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//声明组件模板</span></span><br><span class="line"><span class="keyword">const</span> product={</span><br><span class="line">  <span class="attr">template</span>:<span class="string">'#product'</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> add = {</span><br><span class="line">  <span class="attr">template</span>:<span class="string">'&lt;h4&gt;商品添加&lt;/h4&gt;'</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> edit = {</span><br><span class="line">  <span class="attr">template</span>:<span class="string">'&lt;h4&gt;商品编辑&lt;/h4&gt;'</span></span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>

<p><strong>8.2、创建路由对象含有嵌套路由</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">        <span class="attr">routes</span>:[</span><br><span class="line">            {</span><br><span class="line">                <span class="attr">path</span>:<span class="string">'/product'</span>,</span><br><span class="line">                <span class="attr">component</span>:product,</span><br><span class="line">                <span class="attr">children</span>:[</span><br><span class="line">                    {<span class="attr">path</span>:<span class="string">'add'</span>,<span class="attr">component</span>: add},</span><br><span class="line">                    {<span class="attr">path</span>:<span class="string">'edit'</span>,<span class="attr">component</span>: edit},</span><br><span class="line">                ]</span><br><span class="line">            },</span><br><span class="line">        ]</span><br><span class="line">    });</span><br></pre></td></tr></tbody></table></figure>

<p><strong>8.3、注册路由对象</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">el</span>: <span class="string">"#app"</span>,</span><br><span class="line">    <span class="attr">data</span>: {},</span><br><span class="line">    <span class="attr">methods</span>: {},</span><br><span class="line">    router,<span class="comment">//定义路由对象</span></span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>

<p><strong>8.4、测试路由</strong></p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/product"</span>&gt;</span>商品管理<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<hr>
<p><strong>案例练习：</strong></p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang="en"&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset="UTF-8"&gt;</span><br><span class="line">    &lt;title&gt;vue系列课程&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id="app"&gt;</span><br><span class="line">        &lt;h1&gt;{{msg}}&lt;/h1&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!--路由链接--&gt;</span><br><span class="line">        &lt;router-link to="/products"&gt;商品管理&lt;/router-link&gt;</span><br><span class="line">        &lt;!--显示路由组件--&gt;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br><span class="line">&lt;template id="productsTemplate"&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;div&gt;&lt;h3&gt;商品列表&lt;/h3&gt;&lt;/div&gt;</span><br><span class="line">        &lt;a href="#/products/add"&gt;添加商品信息&lt;/a&gt;</span><br><span class="line">        &lt;table border="1"&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">                &lt;th&gt;编号&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;名称&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;价格&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;生产日期&lt;/th&gt;</span><br><span class="line">                &lt;th&gt;操作&lt;/th&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">                &lt;td&gt;1&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;短袖&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;60.88&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;2021-06-09&lt;/td&gt;</span><br><span class="line">                &lt;!--&lt;th&gt;&lt;a href=""&gt;删除&lt;/a&gt;&lt;a href="#/products/edit"&gt;修改&lt;/a&gt;&lt;/th&gt;--&gt;</span><br><span class="line">                &lt;td&gt;&lt;a href=""&gt;删除&lt;/a&gt;&lt;a href="javascript:;" @click.prevent="editRow({id:1,name:'小陈'})"&gt;修改&lt;/a&gt;&lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">        &lt;/table&gt;</span><br><span class="line">        &lt;!--router-view 用来展示子路由组件--&gt;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script src="js/vue.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src="js/axios.min.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src="js/vue-router.js"&gt;&lt;/script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">    //创建组件配置对象</span><br><span class="line">    const products = {</span><br><span class="line">        template:"#productsTemplate",</span><br><span class="line">        data(){</span><br><span class="line">            return {};</span><br><span class="line">        },</span><br><span class="line">        methods:{</span><br><span class="line">            editRow(user){</span><br><span class="line">                console.log(user);</span><br><span class="line">                this.$router.push({path:'/products/edit',query:user}); //切换路由路径 通过query(?)</span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    };</span><br><span class="line"></span><br><span class="line">    //创建添加商品信息子组件</span><br><span class="line">    const add = {</span><br><span class="line">        template: "&lt;div from action=''&gt;商品名称: &lt;input type='text'&gt;&lt;br&gt;商品价格: &lt;input type='text'&gt;&lt;br&gt; &lt;input type='button' value='保存商品'&gt;&lt;/div&gt;"</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    const edit = {</span><br><span class="line">        template: "&lt;div from action=''&gt;商品名称: &lt;input type='text' v-model='user.id'&gt;&lt;br&gt;商品价格: &lt;input type='text' v-model='user.name'&gt;&lt;br&gt; &lt;input type='button' value='确认修改'&gt;&lt;/div&gt;",</span><br><span class="line">        data() {</span><br><span class="line">            return {</span><br><span class="line">                user:{},</span><br><span class="line">            };</span><br><span class="line">        },</span><br><span class="line">        methods:{},</span><br><span class="line">        created(){</span><br><span class="line">            console.log("edit: ",this.$route.query);</span><br><span class="line">            this.user = this.$route.query;</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">    //创建路由对象</span><br><span class="line">    const router = new VueRouter({</span><br><span class="line">        routes:[</span><br><span class="line">            {path:'/',redirect:'/products' },  //默认路由</span><br><span class="line">            {</span><br><span class="line">                path:'/products',</span><br><span class="line">                name:'products',</span><br><span class="line">                component:products,</span><br><span class="line">                children:[ //定义子路由 注意：子路由的path属性不能使用'/'开头</span><br><span class="line">                    {path:"add",component:add},</span><br><span class="line">                    {path:"edit",component:edit},</span><br><span class="line">                ]</span><br><span class="line">            },</span><br><span class="line"></span><br><span class="line">        ]</span><br><span class="line">    });</span><br><span class="line"></span><br><span class="line">    const app = new Vue({</span><br><span class="line">       el:"#app",</span><br><span class="line">       data:{</span><br><span class="line">           msg:"vue 中router 中嵌套路由的使用",</span><br><span class="line">       },</span><br><span class="line">       methods:{},</span><br><span class="line">       computed:{},</span><br><span class="line">       components:{</span><br><span class="line">           products,</span><br><span class="line">       },</span><br><span class="line">       router,  //注册路由</span><br><span class="line">    });</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p><strong>运行截图：</strong></p>
<img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-140240.png" alt="image-20210720221718792" style="zoom:50%;">  


      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://yichenfirst.github.io/2021/09/11/%E5%89%8D%E7%AB%AF/vue%E7%BB%84%E4%BB%B6%E4%B8%8E%E8%B7%AF%E7%94%B1/" title="vue组件与路由" target="_blank" rel="external">https://yichenfirst.github.io/2021/09/11/前端/vue组件与路由/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="" target="_blank"><span class="text-dark">逸辰</span><small class="ml-1x">后端开发</small></a></h3>
        <div>个人简介。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2021/09/27/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/%E5%93%B2%E5%AD%A6%E5%AE%B6%E8%BF%9B%E9%A4%90%E9%97%AE%E9%A2%98/" title="哲学家进餐问题"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2021/09/02/ElasticSearch/" title="ElasticSearch概述"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>赏</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您的支持，我会继续努力的!</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
    <div class="copyright">
    	
        &copy; 2023 逸辰
        
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   
    
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>